<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <style>
        body {
            margin: 0;
        }
        .header {
            width: 100%;
            height: 60px;
            background-color: #f0f0f0;
            border-bottom: 2px solid #ccc;
        }
        .header .btn-toggle {
            float: right;
            padding: 10px 30px;
            height: 20px;
            line-height: 20px;
            background-color: skyblue;
            margin: 10px 150px 10px 0 ;
            cursor: pointer;
            color: #fff;
        }
        .header .code {
            /* 隐藏二维码 */
            display: none;
            position: absolute;
            right: 20px;
            top: 60px;
            border: 2px solid #ccc;
            border-top: 0;
            z-index: 1000;
            background-color: #fff;
            padding: 20px 20px 20px 20px;
        }

        .header .code .btn-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: #ccc;
            cursor: pointer;
        }
        body {
            user-select: none;
        }
    </style>
</head>
<body>

    <div class="header">
        <!-- 可以使用事件委托 -->
        <div class="btn btn-toggle"> 切换 </div>
        <!-- 不建议使用事件委托 div > span -->
        <!-- <div class="btn btn-toggle"> <span>切换</span> </div> -->

        <div class="code">
            <!-- 可以使用事件委托 -->
            <span class="btn btn-close">×</span>
            <img src="./code.png" alt="">
        </div>

    </div>
    
    <script>
        // 要求：
            // 点击“切换”， 显示二维码 ,隐藏二维码 
            //点击 “关闭” 按钮 ,隐藏二维码  
        // 步骤：
            // 1、获取元素
            // 2、事件绑定
            // 3、书写处理逻辑

        // 获取.header 标签
        // var btnToggle = document.querySelector(".btn-toggle");
        var el = document.querySelector(".header");
        var code = document.querySelector(".code");
        // 给el标签绑定事件（事件委托）
        el.onclick = function(event){
            // 事件源
            var ele = event.target;
            // 获取事件源的类名
            var cName = ele.className;
            // console.log(typeof cName);// string
            // 判断是否包含btn-toggle字符文本
            if(cName.indexOf("btn-toggle") > -1){
                // 切换二维码
                if(ele.flag == undefined){
                    // console.log("1");
                    // 显示二维码
                    code.style["display"] = "block";
                    ele.flag = 1;
                }else {
                    // console.log("0");
                    // 隐藏二维码
                    code.style["display"] = "none";
                    ele.flag = undefined;
                }
            }

            // 判断是否包含btn-close字符文本
            if(cName.indexOf("btn-close") >-1){
                // 关闭二维码
                code.style["display"] = "none";
            }
        }

      




       
    </script>
</body>
</html>